<template>
  <div>
    <!-- 状态栏 -->
    <el-row :gutter="14">
      <el-col :span="4">
        <div class="label-wrap category">
          <label>分类：</label>
          <div class="wrap-content">
            <el-select v-model="categoryValue" placeholder="请选择">
              <el-option
                style="width: 100%"
                v-for="item in categoryOptions.items"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="label-wrap date">
          <label>日期：</label>
          <div class="wrap-content">
            <el-date-picker
              style="width: 100%"
              v-model="dateValue"
              type="datetimerange"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="label-wrap keyword">
          <label>关键字：</label>
          <div class="wrap-content">
            <el-select v-model="searchKeyWord" style="width: 100%">
              <el-option
                v-for="item in searchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchContent"
          placeholder="请输入内容"
          style="width: 100%"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" style="width: 100%" @click="getList"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="2">&nbsp;</el-col>
      <el-col :span="2">
        <el-button
          type="danger"
          class="pull-right"
          style="width: 100%"
          @click="addDialogVisible = true"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <div class="black-space-30"></div>
    <!-- 表格数据 -->
    <el-table
      :data="tableData.items"
      v-loading="loading"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="35" />
      <el-table-column prop="title" label="标题" width="300" />
      <el-table-column
        prop="categoryId"
        label="类别"
        width="100"
        :formatter="toCategory"
      />
      <el-table-column
        prop="createDate"
        label="日期"
        width="200"
        :formatter="toDate"
      />
      <el-table-column prop="user" label="管理人" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="danger"
            size="mini"
            @click="deleteItemConfirm(scope.row.id)"
            >删除</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="openEditDialog(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="black-space-30"></div>
    <!-- 底部分页 -->
    <el-row>
      <el-col :span="4">
        <el-button size="medium" @click="deleteAllConfirm">批量删除</el-button>
      </el-col>
      <el-col :span="20">
        <el-pagination
          class="pull-right"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 新增弹窗 -->
    <AddDialog
      :visible="addDialogVisible"
      :categories="categoryOptions.items"
      @close="closeDialog"
    />

    <!-- 编辑弹窗 -->
    <EditDialog
      :visible="editDialogVisible"
      :categories="categoryOptions.items"
      :infoData="infoData"
      @close="closeDialog"
    />
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import AddDialog from "./dialog/add";
import EditDialog from "./dialog/edit";
import { ElMessage } from "element-plus";
import { getInfoCategoryList } from "@/api/common";
import { queryInfoList, deleteInfo } from "@/api/news";
import { timestampToTime } from "@/utils/common";
export default {
  name: "infoIndex",
  components: { AddDialog, EditDialog },
  setup() {
    const { proxy } = getCurrentInstance();

    // 搜索数据
    const categoryValue = ref("");
    const dateValue = ref("");
    const searchKeyWord = ref("id");
    const searchContent = ref("");

    // 弹窗显示状态
    const addDialogVisible = ref(false);
    const editDialogVisible = ref(false);

    // 表格加载状态
    const loading = ref(false);

    // 删除id
    const deleteIds = ref("");

    // 编辑数据
    const infoData = ref([]);

    const categoryOptions = reactive({
      items: [],
    });
    const searchOptions = reactive([
      {
        value: "id",
        label: "ID",
      },
      {
        value: "title",
        label: "标题",
      },
    ]);

    const tableData = reactive({
      items: [],
      total: 0,
      pageNumber: 1,
      pageSize: 10,
    });

    // 获取信息
    const getList = () => {
      let requestData = searchData();

      loading.value = true;
      queryInfoList(requestData)
        .then((response) => {
          let data = response.data.data;
          tableData.items = data.data;
          tableData.total = data.total;

          loading.value = false;
        })
        .catch((error) => {
          loading.value = false;
        });
    };

    // 搜索条件数据
    const searchData = () => {
      let requestData = {
        pageNumber: tableData.pageNumber,
        pageSize: tableData.pageSize,
      };
      if (categoryValue.value) {
        requestData.categoryId = categoryValue.value;
      }
      if (dateValue.value.length > 0) {
        requestData.startTime = dateValue.value[0];
        requestData.endTime = dateValue.value[1];
      }
      if (searchContent.value) {
        requestData[searchKeyWord.value] = searchContent.value;
      }
      return requestData;
    };

    // 分页
    const handleSizeChange = (val) => {
      tableData.pageSize = val;
    };
    const handleCurrentChange = (val) => {
      tableData.pageNumber = val;
      getList();
    };

    // 多选
    const handleSelectionChange = (val) => {
      deleteIds.value = val.map((item) => item.id);
    };

    // 关闭窗口
    const closeDialog = () => {
      addDialogVisible.value = false;
      editDialogVisible.value = false;
    };

    // 删除单个信息
    const deleteItemConfirm = (id) => {
      deleteIds.value = [id];
      proxy.confirm({
        content: "确认删除此信息",
        tip: "警告",
        successFn: toDeleteInfo,
        cancelFn: () => {
          deleteIds.value = "";
        },
      });
    };
    // 删除所有信息
    const deleteAllConfirm = () => {
      if (!deleteIds.value || deleteIds.value.length == 0) {
        ElMessage({
          type: "error",
          message: "请选择要删除的数据",
        });
        return false;
      }
      proxy.confirm({
        content: "确认删除选中的信息",
        successFn: toDeleteInfo,
      });
    };

    // 删除信息
    const toDeleteInfo = () => {
      deleteInfo({ ids: deleteIds.value })
        .then((response) => {
          ElMessage({
            type: "success",
            message: response.data.message,
          });

          // 重新查询信息
          getList();

          deleteIds.value = "";
        })
        .catch((error) => {});
    };

    // 打开编辑窗口
    const openEditDialog = (data) => {
      editDialogVisible.value = true;
      infoData.value = data;
    };

    // 转换日期格式
    const toDate = (row) => {
      return timestampToTime(row.createDate);
    };

    // 转换类型
    const toCategory = (row) => {
      let category = categoryOptions.items.filter(
        (item) => item.id == row.categoryId
      );
      if (category.length > 0) {
        return category[0].categoryName;
      } else {
        return "";
      }
    };

    onMounted(() => {
      // 获取分类
      getInfoCategoryList({
        callback: (response) => {
          categoryOptions.items = response;
        },
      });

      // 获取信息
      getList();
    });

    return {
      categoryValue,
      dateValue,
      addDialogVisible,
      editDialogVisible,
      searchKeyWord,
      searchContent,
      searchOptions,
      categoryOptions,
      tableData,
      infoData,
      loading,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      getList,
      closeDialog,
      deleteItemConfirm,
      deleteAllConfirm,
      openEditDialog,
      toDate,
      toCategory,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/config.scss";

.label-wrap {
  &.category {
    @include labelDom(left, 50, 40);
  }
  &.date {
    @include labelDom(right, 50, 40);
  }
  &.keyword {
    @include labelDom(right, 60, 40);
  }
}
</style>